<template>
  <div class="tuijian">
    <div class="left">
      <div class="leftbox" v-for="item in arr4">
        <div>
          <span>
            <img :src="item.img" class="imgtuijian" />
          </span>
          <span class="imgtext">{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr4: "",
    };
  },
  components: {},
  mounted() {
    this.$axios("/hxs/tuijianshangpin", {
      params: { classer1: "饼", classer2: "早餐", classer3: "奶茶" },
    }).then((res) => {
      console.log(res);
      this.arr4 = res.data;
    });
  },
};
</script>


<style lang="scss" scoped>
.tuijian {
  width: 1020px;
  // height: 237px;
  // background-color: rgb(178, 236, 217);
  position: absolute;
  bottom: 80px;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.left {
  width: 100%;
  height: 245px;
  // background-color: wheat;
  // margin-left: 4px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.imgtuijian {
  width: 60px;
  height: 60px;
  margin-left: 10px;
  border-radius: 10px;
}
.imgtext {
  display: inline-block;
  width: 130px;
  height: 40px;
  // background-color: red;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 50px;
  white-space: nowrap;
  margin-left: 8px;
  text-align: center;
  position: relative;
  top:12px;
  font-size: 18px;
  border: wheat;
}
.imgtext:hover{
  background-color: sandybrown;
  color: white;
}
.imgtuijian:hover{
  transform: scale(1.5);
}
</style>
